<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  title: String,
  tip: String,
});

const emit = defineEmits([
  'result'
]);

const popupShow = ref(false);
const inputedPassword = ref();
const showKeyboard = ref(true);

const showConfirmUserPopup = () => {
  popupShow.value = true;
  showKeyboard.value = true;
}

watch(inputedPassword, (newVal) => {
  // TODO: 改成不是用 env 变量，而是把输入结果返回
  if (newVal.length === 6 && newVal === import.meta.env.VITE_ENCRYPT_KEY) {
    emit('result', true);
    popupShow.value = false;
  } else {
    emit('result', false);
  }
});

defineExpose({
  showConfirmUserPopup
});

</script>

<template>
  <van-popup v-model:show="popupShow" position="bottom" teleport="body" :style="{ height: '60%' }"
    @closed="inputedPassword = ''">
    <h1 class="text-2xl text-center font-bold py-4 bg-[#F0F1F4] dark:bg-[#2C2C2D]">{{ props.title }}</h1>
    <div class="bg-[#F0F1F4] dark:bg-[#2C2C2D] h-full pt-2">
      <!-- 密码输入框 -->
      <van-password-input :gutter="8" :info="tip" :length="6" :value="inputedPassword" :focused="showKeyboard"
        @focus="showKeyboard = true" />
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="inputedPassword" :show="showKeyboard" @blur="showKeyboard = false" />
    </div>
  </van-popup>

</template>

<style lang="scss" scoped></style>